<template>
  <div>
    <div class="couponTop">
      <div style="display:flex">
        <el-button type="primary" @click="issueCoupon"
          >发布积分优惠券</el-button
        >
        <set-drop
          setName="批量删除"
          :dropdownList="dropdownCoupList"
          @setClick="delGoods"
          @command="command"
          style="margin-left:20px"
        />
      </div>
      <SelectCom
        @changeSel="changeSel"
        :name="name"
        style="margin-left:380px"
      ></SelectCom>
      <div style="display:flex">
        <el-input
          class="filter__right--input"
          v-model="search.name"
          @keyup.enter.native="searchBy"
          clearable
          style="width: 200px;"
          placeholder="输入优惠券ID"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchBy"
          ></el-button>
        </el-input>
      </div>
    </div>
    <CouponTable :couponTable="couponTable" ref="couTable"></CouponTable>
    <div class="couponBottom">
      <set-drop
        setName="批量删除"
        :dropdownList="dropdownCoupList"
        @setClick="delGoods"
        @command="command"
        style="margin-top:20px"
      />
      <PageManage
        :pageSize="search.size"
        :pageNum="search.current"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import SelectCom from "../components/SelectCom.vue";
import CouponTable from "./CouponTable.vue";
import PageManage from "@/components/PageManage.vue";
import SetDrop from "@/views/customer/common/SetDrop.vue";
import {
  couponIntList,
  delCoupons,
  offCoupons,
} from "@/api/couponActivity/coupon";
import DateUtil from "@/store/modules/date";

@Component({
  components: {
    SelectCom,
    CouponTable,
    PageManage,
    SetDrop,
  },
})
export default class CouponList extends Vue {
  @Ref()
  readonly couTable: HTMLFormElement;

  name = "CouponList";

  total = 0;

  /** 选择优惠券数组 */
  goodIds = [];

  /** 优惠券数组 */
  couponTable = [];

  /** 搜索条件 */
  search = {
    current: 1,
    size: 10,
    name: "", // 优惠券名称
    couponType: "", // 优惠券类型
    status: "", // 优惠券状态
    giveType: 2,
  };

  dropdownCoupList = [
    {
      text: "批量上架",
      command: "1",
      show: true,
    },
    {
      text: "批量下架",
      command: "2",
      show: true,
    },
  ];

  mounted() {
    this.getList();
  }

  /**
   * 获取积分优惠券列表
   */
  getList() {
    couponIntList(this.search).then(res => {
      res.data.list.forEach(item => {
        item.couponType += 1;
        if (item.startTime) {
          item.effectiveStartTime = new DateUtil("").getYMDs(item.startTime);
          item.effectiveEndTime = new DateUtil("").getYMDs(item.endTime);
        } else {
          item.effectiveStartTime = new DateUtil("").getYMDs(item.createTime);
          item.effectiveEndTime = new DateUtil("").getAddDays(
            item.createTime,
            item.effectiveDays,
          );
        }
      });
      this.couponTable = res.data.list;
      this.total = res.data.total;
    });
  }

  /**
   * 顶部状态筛选
   */
  changeSel(e) {
    this.search.status = e !== "0" ? e : "";
    this.getList();
  }

  /**
   * 搜索功能
   */
  searchBy() {
    this.getList();
  }

  /**
   * 发布积分优惠券
   */
  issueCoupon() {
    this.$router.push({ name: "IssueCouponAdd" });
  }

  /**
   * 下拉框选择
   */
  command(e) {
    this.goodIds = [];
    const goodIds = this.couTable.$refs.couponList.getCheckedItem();
    goodIds.forEach(item => {
      this.goodIds.push(item.id);
    });
    if (this.goodIds.length === 0) {
      this.$message.error("请先选择优惠券");
      return;
    }
    offCoupons(e === "1" ? 1 : 2, this.goodIds).then(res => {
      if (res.code === 200) {
        this.$message.success(`优惠券已${e === "1" ? "上架" : "下架"}`);
        this.getList();
      }
    });
  }

  /**
   * 批量删除
   */
  delGoods() {
    const goodIds = this.couTable.$refs.couponList.getCheckedItem();
    this.goodIds = goodIds.map(item => {
      return item.id;
    });
    if (this.goodIds.length === 0) {
      this.$message.error("请选择要删除优惠券");
      return;
    }

    this.$confirm("确认删除选中优惠券吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delCoupons(this.goodIds, {}).then(res => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    });
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.search.size = val;
    this.getList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.search.current = val;
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
@include b(couponTop) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.couponBottom {
  // display: -webkit-box;
  // justify-content: space-between;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 10px;
  width: 980px !important;
  background-color: white;
  padding-bottom: 10px;
  z-index: 10;
}

.search {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
